<template>
	<view class="register">
		<view class="inputWrap bgw pd30">
			<view class="input">
				<view class="inputLeft">
					<view class="title">姓名</view>
					<input type="text" v-model="name" placeholder="请输入姓名" placeholder-class="pcs" />
				</view>
			</view>
			<view class="input">
				<view class="inputLeft">
					<view class="title">手机号码</view>
					<input type="number" v-model="phone" placeholder="请输入手机号码" placeholder-class="pcs" />
				</view>
			</view>

			<view class="input" @click="showMulLinkageThreePicker">
				<view class="inputLeft">
					<view class="title">收货地址</view>
					<view>
						<view class="pcs" v-if="!shengId">请选择地址</view>
						<view class="pickerInput" v-else>{{shengName}}-{{shiName}}-{{quName}}</view>
					</view>
				</view>
			</view>
			<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker"
				:pickerValueDefault="cityPickerValueDefault" @onCancel="onCancel" @onConfirm="onConfirm">
			</mpvue-city-picker>

			<view class="uniFlex2">
				<view class="title">详细地址</view>
				<textarea type="text" v-model="address" placeholder="请输入详细地址" placeholder-class="pcs2"></textarea>
			</view>

		</view>

		<view class="btnStyle" @click="submit">立即提交</view>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import {
		update_address
	} from '@/request/api.js'
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				id:'',
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#007AFF',
				pickerText: '',
				mode: '',
				deepLength: 1,

				shengName: '', //居住省
				shengId: '',
				shiName: '', //居住市
				shiId: '',
				quName: '', //居住区
				quId: '',

				address: '', //详细地址

				name: '',
				phone: ''
			}
		},
		onLoad(options) {
			let items = JSON.parse(JSON.parse(options.query).items)
			this.id = items.id
			this.name = items.name
			this.phone = items.phone
			this.shengName = items.province_name
			this.shengId = items.province
			this.shiName = items.city_name
			this.shiId = items.city
			this.quName = items.area_name
			this.quId = items.area
			this.address = items.address
		},
		methods: {
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				this.pickerText = JSON.stringify(e)
				// console.log(JSON.parse(this.pickerText).label)
				this.pickerText = JSON.stringify(e.label).replace(/\"/g, '');
				this.shengName = String(this.pickerText).split('-')[0]
				this.shiName = String(this.pickerText).split('-')[1]
				this.quName = String(this.pickerText).split('-')[2]
				let dataId = JSON.stringify(e.cityCode).replace(/\"/g, '')
				this.shengId = dataId.substring(0, 2) + '0000'
				this.shiId = dataId.substring(0, 4) + '00'
				this.quId = dataId
				// console.log(this.shengId, this.shengName, '省')
				// console.log(this.shiId, this.shiName, '市')
				// console.log(this.quId, this.quName, '区')
			},
			submit() {
				if (!this.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: "none"
					})
					return
				}
				if (!/^1[3456789]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: "none"
					})
					return
				}
				if (!this.shengId) {
					uni.showToast({
						title: '请选择地址',
						icon: "none"
					})
					return
				}
				if (!this.address) {
					uni.showToast({
						title: '请输入详细地址',
						icon: "none"
					})
					return
				}
				let param = {
					id: this.id,
					name: this.name,
					phone: this.phone,
					province: this.shengId,
					city: this.shiId,
					area: this.quId,
					address: this.address,
				}
				update_address(param).then(res => {
					uni.showToast({
						title:'操作成功',
						icon:'none'
					})
					setTimeout(function(){
						uni.navigateBack({
							delta: 1
						})
					},800)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f8f8f8;
	}

	.register {
		.inputWrap {
			margin-bottom: 150upx;

			.input {
				height: 96upx;
				border-bottom: 1px solid #E5E5E5;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.inputLeft {
					display: flex;
					align-items: center;

					.title {
						width: 140upx;
						font-size: 28upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						line-height: 40px;
						color: #414141;
						margin-right: 40upx;
					}

					.pickerInput {
						font-size: 28upx;
						line-height: 96upx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						width:500upx;
					}
				}
			}

			.input:last-of-type {
				border: none;
			}
		}
		
		.uniFlex2{
			.title {
				line-height: 40px;
				width: 140upx;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #414141;
				margin-right: 40upx;
			}
			
			textarea {
				flex: 1;
				padding: 20upx 0;
			}
			
		}

		.uniBtn {
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #9F9F9F;
			padding: 36upx;
			color: #6996FE;
			margin-bottom: 36upx;
		}
	}
</style>
